<template>
	<view class="marketing">
		<!-- 昨日 -->
		<view class="tabs">
			<view :class="{ actived: type == 1 }" @tap="type = 1">昨日</view>
			<view :class="{ actived: type == 2 }" @tap="type = 2">近7日</view>
			<view :class="{ actived: type == 3 }" @tap="type = 3">近30日</view>
			<view :class="{ actived: type == 4 }" @tap="type = 4">按周</view>			
			<view :class="{ actived: type == 5 }" @tap="type = 5">按月</view>
		</view>
		<!-- 营销概览 -->
		<view class="An">
			<view>
				<view>营销概览</view>
				<!-- 数据概览 -->
				<view class="overview f_two">
					<view class="f">
						<view>数据概览</view>
						<view><image src="../static/management/yiwen.png" mode=""></image></view>
					</view>
					<view class="f">
						<view>比上周四</view>
						<view><image src="../static/home/jiantouq.png" mode=""></image></view>
						<view>09-13</view>
					</view>
				</view>
				<!-- 活动订单量(单) -->
				<view class="volume f_two">
					<view>
						<view>活动订单量(单)</view>
						<view>0</view>
						<view></view>
						<view>占本店总订单量0.00%</view>
						<view>比上周四持平</view>
						<view>比商圈同品类均值持平</view>
					</view>
					<view>
						<view>活动订单量(单)</view>
						<view>0</view>
						<view></view>
						<view>占本店总订单量0.00%</view>
						<view>比上周四持平</view>
						<view>比商圈同品类均值持平</view>
					</view>
					<view style="margin-top: 55upx;">
						<view>活动下单新客(人)</view>
						<view>0</view>
						<view></view>
						<view>占本店总订单量0.00%</view>
						<view>比上周四持平</view>
						<view>比商圈同品类均值持平</view>
					</view>
					
					<!-- 商家成本(元) -->
					<view style="margin-top: 20upx;">
						<view>商家成本(元)</view>
						<view>0</view>
						<view></view>
						<view>比上周四持平</view>
						<view>比商圈同品类均值持平</view>
						<view></view>
					</view>
				</view>
				
				<!-- 营销力度 -->
				<view class="efforts f_two">
					<view>
						<view>营销力度</view>
						<view>=  商家成本 ÷ 顾客应付</view>
						<view>0</view>
						<view>比上周四持平</view>
						<view>比商圈同品类均值持平</view>
					</view>
					<view>
						<view>投入产出比</view>
						<view>=  顾客实付 ÷ 商家成本</view>
						<view>0</view>
						<view>比上周四持平</view>
						<view>比商圈同品类均值持平</view>
					</view>
				
				</view>
			</view>
		</view>
		<!-- 活动总成本分析 -->
		<view class="analysis">
			<view>活动总成本分析</view>
			
			<!-- 活动总成本 -->
			<view class="cost f_two">
				<view :class="{ actived: typeIndex == 1 }" @tap="typeIndex = 1">活动总成本</view>
				<view :class="{ actived: typeIndex == 2 }" @tap="typeIndex = 2">各类型活动总成本</view>
				<view :class="{ actived: typeIndex == 3 }" @tap="typeIndex = 3">新老客活动总成本</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			type: 1,
			typeIndex:1
		};
	},
	methods: {
		
	}
};
</script>
<style lang="scss" scoped>
.marketing{
	.tabs {
		display: flex;
		align-items: center;
		justify-content: center;
	    background: #FFFFFF;
		padding: 24upx 40upx;
		& > view:nth-child(1) {
			width: 164upx;
			height: 66upx;
			border: 2upx solid #dddddd;
			border-radius: 33upx 0upx 0upx 33upx;
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		& > view:nth-child(2) {
			width: 164upx;
			height: 66upx;
			border: 2upx solid rgba(221, 221, 221, 1);
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		& > view:nth-child(3) {
			width: 164upx;
			height: 66upx;
			border: 2upx solid rgba(221, 221, 221, 1);
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		& > view:nth-child(4) {
			width: 164upx;
			height: 66upx;
			border: 2upx solid rgba(221, 221, 221, 1);
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		& > view:nth-child(5) {
			width: 164upx;
			height: 66upx;
			border: 2upx solid #dddddd;
			border-radius: 0upx 33upx 33upx 0upx;
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.actived {
			background: $bg12-background !important;
			border: 2upx solid $bg-background !important;
		}
	}
	.An{
		margin-top: 20upx;
		background: #FFFFFF;
		&>view{
			padding: 37upx 49upx 79upx 42upx;
			&>view:nth-child(1){				
				font-size: 36upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #35394C;
			}
			.overview{
				margin-top: 62upx;
				&>view:nth-child(1){
					&>view:nth-child(1){
						
						font-size: 32upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
					&>view:nth-child(2){
						image{
							width: 21upx;
							height: 21upx;
							margin-left: 16upx;
						}
					}
				}
				&>view:nth-child(2){
					&>view:nth-child(1){
						
						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666666;
					}
					&>view:nth-child(2){
						image{
							width: 43upx;
							height: 37upx;
							display: flex;
						}
					}
					&>view:nth-child(3){
						margin-left: 18upx;
						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
				}
			}
			.volume{
				
				&>view{
					width: 45%;
					margin-top: 51upx;
					&>view:nth-child(1){
						
						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666666;
					}
					&>view:nth-child(2){
						
						font-size: 36upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #333333;
						margin-top: 20upx;
					}
					&>view:nth-child(3){
						width: 100%;
						
						height: 6upx;
						background: #E4E7EE;
						border-radius: 3upx;
						margin-top: 35upx;
					}
					&>view:nth-child(4){
						
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666666;
						margin-top: 10upx;
					}
					&>view:nth-child(5){
						margin-top: 21upx;
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
					&>view:nth-child(6){
						margin-top: 20upx;
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
				}
				
			}
			.efforts{
				&>view{
					width: 45%;
					margin-top: 55upx;
					&>view:nth-child(1){
						
						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666666;
					}
					&>view:nth-child(2){
						margin-top: 15upx;
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
					&>view:nth-child(3){
						margin-top: 28upx;
						font-size: 36upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #333333;
					}
					&>view:nth-child(4){
						margin-top: 36upx;
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
					&>view:nth-child(5){
						margin-top: 20upx;
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
	}
	
	.analysis{
		margin-top: 20upx;
		height: 300upx;
		background: #FFFFFF;
		&>view:nth-child(1){
			padding: 35upx 42upx;			
			font-size: 36upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			
		}
		.cost{
			margin-top: 97upx;
			padding: 0 41upx;
			&>view{
				height: 60upx;
				font-size: 30upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}
			.actived{
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #35394c;
				border-bottom: 3px solid #35394c;				
				border-radius: 3upx;
			}
		}
	}
}
</style>